<template>
  <div class="login">
    <div class="login-dalog">
      
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item  prop="username" class="username">
        <el-input v-model="ruleForm.username" class="login-input username-input"></el-input>
      </el-form-item>
      <el-form-item prop="password" class="password">
        <el-input v-model="ruleForm.password" class="login-input password-input" show-password></el-input>
      </el-form-item>
      <el-form-item class="login-item">
        <el-button type="primary" @click="login('ruleForm')" class="login-bto">登录</el-button>
      </el-form-item>
    </el-form>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: '18607122704',
        password: '123456'
      },
      rules: {
        username: [
          {  message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    login() {
      let{username,password} = this.ruleForm;
      let formData = new FormData();
      formData.append("account",username);
      formData.append("password",password);
      this.$http({
        method:'post',
        url:'/admin/login/s',
        data: formData
      }).then(res=>{
        let code = res.data.code;
        if(code == 200){
          sessionStorage.setItem("user",JSON.stringify(res.data.data))
          this.$store.dispatch("SET_PERMISSION",res.data.data.permission);
          this.$router.push("/home")
        }
        if(code != 200){
            this.$message({
              message: res.data.msg,
              center: true,
              type: 'error'
            })
        }
      }).catch(error=>{
        console.log(error)
        sessionStorage.clear();
        this.$message({
              message: "服务器系统异常",
              center: true,
              type: 'warning'
            })
      })
    }
  }
}

</script>

<style>
.username{
  padding-top: 20%;
  margin-right: 6.25em;
}
.password{
  margin-right: 6.25em;
}
.login-item{
  margin-right: 6.25em;
}
.login-bto{
  width: 100%;
}

.login{
  height: 58.125em;
  position: relative;
}
.login-dalog{
  width: 28.125em;
  height: 21.125em;
  background-color: #ccc;
  position: absolute;
  /*水平垂直居中 */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


</style>
